<template>
  <div class="investment_one">
    <!---------投资项目页面标题-------->
    <div class="investment-header">
      <ul>
        <li><p style="font-size:28px; color:grey; margin-left:40px; padding-top:20px; float:left; ">投资项目</p></li>
      </ul>
      <ul>
        <el-button style="float:left;
        margin-left:930px;
        border: 4px solid #009688;
        color: white;
        background-color: #009688;margin-top:15px;"
        @click="open()"
        >新增投资项目</el-button>
      </ul>
    </div>
    <div class="investment-two"></div>

    <!---------时间，类型，名称模糊查-------->
    <div class="investment-three">
      <el-form>
        <el-col style="padding-top:16px; margin-left:20px;">
          <span style="font-size:18px;">投资时间：</span>
          <el-date-picker
          v-model="startDate"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          ></el-date-picker>
          至
          <el-date-picker
          v-model="endDate"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          ></el-date-picker>
          <el-input placeholder="请输入关键字" suffix-icon="el-icon-search"
            style="width:200px; margin-left:20px;"
            v-model="propertyName"
          ></el-input>

          <el-select v-model="type.propertyTypeId" style=" margin-left:20px;">
            <el-option
              v-for="obj in type"
              :key="obj.propertyTypeId"
              :label="obj.propertyTypeName"
              :value="obj.propertyTypeId"
            ></el-option>
          </el-select>

          <el-button
            style="
              margin-left: 100px;
              border: 1px solid #009688;
              color: white;
              background-color: #009688;"
            @click="search()"
            >搜索</el-button>
        </el-col>
      </el-form>
        <!---------投资项目表格-------->
       <el-table
          style="width: 100%; padding-top: 30px"
          :header-cell-style="{ background: 'silver', color: '#606266' }"
          :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)">
          <el-table-column width="50"></el-table-column>
          <el-table-column label="Id" width="100px" prop="propertyId"></el-table-column>
          <el-table-column label="资产名称" width="180px" prop="propertyName"></el-table-column>
          <el-table-column label="年化收益率" width="120px" prop="yearYield">
            <template slot-scope="scope">
              {{ scope.row.yearYield}}%
            </template>
          </el-table-column>
          <el-table-column label="投资期限" width="120px" prop="propertyDeadline">
            <template slot-scope="scope">
              {{ scope.row.propertyDeadline}}个月
            </template>
          </el-table-column>
          <el-table-column label="项目启动时间" width="100px" prop="propertyStarttime"></el-table-column>
          <el-table-column label="剩余金额" width="130px" prop="residueMoney">
            <template slot-scope="scope">
              {{ scope.row.residueMoney}}元
            </template>
          </el-table-column>
          <el-table-column label="项目进度" width="200px" prop="projectSchedule">
             <template slot-scope="scope">
            <el-progress
              type="line"
              :stroke-width="8"
              :percentage="((scope.row.propertyResidue-scope.row.residueMoney)/scope.row.propertyResidue*100) | rounding"
              color="red"
            ></el-progress>
          </template>
          </el-table-column>
          <el-table-column label="投资类型" width="130px" prop="propertyTypeName"></el-table-column>
           <el-table-column label="总投资金额" width="120px" prop="propertyResidue">
            <template slot-scope="scope">
              {{ scope.row.propertyResidue}}元
            </template>
          </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[3, 6, 9, 12, 16]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 20px; margin-left: 150px;"
      :total="list.length"
    >
    </el-pagination>

    <!---------新增投资项目弹框-------->
    <el-dialog 
      title="投资项目信息"
      :visible.sync="dialogInvest"
      width="40%"
      :before-close="handleClose"
    >
        <el-form :model="InvestList" label-width="120px">
          <el-form-item label="资产名称：" prop="propertyName" :rules="[
               {
                pattern: /^[\u4e00-\u9fa5]{0,8}$/,
                message: '最多只可以输入8个汉字!',
                trigger: 'change',
              },
          ]">
              <el-input v-model="InvestList.propertyName" placeholder="请输入资产名称" style="width:80%"></el-input>
          </el-form-item>

          <el-form-item label="投资总金额" prop="propertyResidue" :rules="[
              {
                pattern: /^[0-9]*[1-9][0-9]*$/,
                message: '只能输入大于0的正整数',
                trigger: 'change',
              },
          ]">
              <el-input v-model="InvestList.propertyResidue" placeholder="请输入总投资金额" style="width:80%"></el-input>
          </el-form-item>

          <el-form-item label="投资期限" prop="propertyDeadline" :rules="[
              {
                pattern: /^0?[1-9]$|^1[0-2]$/,
                message: '请输入大于0的整数!小于13的整数',
                trigger: 'change',
              },
          ]">
              <el-input clearable v-model="InvestList.propertyDeadline" placeholder="请输入投资期限!" style="width:80%"></el-input>
          </el-form-item>

            <el-form-item label="收益年利率"  prop="yearYield" :rules="[
              {
                pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{2})$/,
                message: '请正确输入收益年利率',
                trigger: 'change',
              },
          ]">
              <el-input clearable v-model="InvestList.yearYield" placeholder="请输入收益年利率!" style="width:80%"></el-input>
          </el-form-item>

           <el-form-item label="投资类型">
              <el-select v-model="InvestList.propertyType" placeholder="请选择类型" style="width:50%">
                <el-option label="车贷" value="1"></el-option>
                <el-option label="房贷" value="2"></el-option>
                <el-option label="经营贷" value="3"></el-option>
                <el-option label="消费贷" value="4"></el-option>
              </el-select>
           </el-form-item>

           <el-form-item label="还款方式">
              <el-select v-model="InvestList.repaymentMethod" placeholder="请选择还款方式" style="width:50%">
                <el-option label="到期还本付息" value="到期还本付息"></el-option>
                <el-option label="等额本金" value="等额本金"></el-option>
                <el-option label="按月还款，等额本息" value="按月还款，等额本息"></el-option>
                <el-option label="按月付息,到期还本" value="按月付息,到期还本"></el-option>
              </el-select>
           </el-form-item>

           <el-form-item label="安全等级">
              <el-select v-model="InvestList.propertySafety" placeholder="请选择安全等级！" style="width:50%">
                <el-option label="⭐" value="1"></el-option>
                <el-option label="⭐⭐" value="2"></el-option>
                <el-option label="⭐⭐⭐" value="3"></el-option>
                <el-option label="⭐⭐⭐⭐" value="4"></el-option>
                <el-option label="⭐⭐⭐⭐⭐" value="5"></el-option>
              </el-select>
           </el-form-item>
      </el-form>
      <template>

          <el-button @click="dialogInvest = false" style="margin-left:400px;">取 消</el-button>
          <el-button type="primary" @click="save()">确 定</el-button>

      </template>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
        type:[],
        list:[],
        currentPage: 1, //初始页
        pagesize: 3, //每页条数
        startDate:"",
        endDate:"",
        propertyName:"", 
        dialogInvest:false,   //定义弹框
        InvestList:{
          propertyName:"",
          propertyResidue:"",
          propertyDeadline:"",
          propertyType:"",
          yearYield:"",
          repaymentMethod:"",
          propertySafety:"",
        },
    }
  },
   filters: {
    rounding (value) {
    return value.toFixed(2)
    }
  },
  created () {
    this.findTypeList();
    this.findList();
  },
  methods: {
    //查询类型
    findTypeList() {
      axios({
        url: "/api/management/getInvestmentTypeList",
      }).then((res) => {
        console.log(res);
        this.type = res.data;
      });
    },
    //查询投资项目
    findList() {
      axios({
        url: "/api/invest/queryInvestmentList",
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
     handleSizeChange(size) {
      console.log(size, "size");
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange(currentPage) {
      console.log(currentPage, "currentPage");
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    //条查
    search() {
      axios({
        url:"/api/invest/queryInvestmentList",
        params:{
          propertyName:this.propertyName,
          startDate:this.startDate,
          endDate:this.endDate,
          propertyType:this.type.propertyTypeId,
        },
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      })
    },
    //打开新增弹框
    open() {
      this.dialogInvest=true;
    },
    //新增投资项目
    save() {
      axios({
        url:"/api/invest/IncreaseInvest",
        params:
            this.InvestList,
      }).then((res) => {
        console.log(res.data)
        this.$message('新增成功')
        this.InvestList = ''
        this.dialogInvest=false;
        this.findList()
      })
    }
  }
}
</script>

<style>
.investment_one{
  width: 100%;
  height: 100%;
  background-color: white;
  float: left;
}
.investment-header{
  width: 100%;
  height: 14%;
  background-color: white;
  float: left;
}
.investment-two{
  width: 100%;
  height: 15px;
  background-color: #F6F6F6;
  float: left;
}
.investment-three{
  width: 100%;
  height: 100%;
  
}

</style>